.invitationPag{
  width: 940px;
  .inviteHeadFigure{
    position: relative;
    height: 250px;
    img{
      width: 100%;
      height: 100%;
    }
    .inviteHeadFigureText{
      position: absolute;
      left: 0;
      top: 0;
      padding-left: 70px;
      padding-top: 44px;
      box-sizing: border-box;
      .bigTitle{
        font-size: 50px;
        .inviteFrend{
          margin-right: 23px;
          color: $white-color;
        }
        .getTask{
          color: $topImg-title-protru-color ;
        }
      }
      .middleTitle{
        font-size: 28px;
        line-height: 72px;
        color: $white-color;
      }
      .smallTitle{
        display: inline-block;
        padding: 0 20px;
        height: 40px;
        font-size: 18px;
        color: $topImg-title-protru-color1;
        background: $white-color;
        line-height: 40px;
        text-align: center;
        border-radius: 30px;
      }
    }
  }
  // 我的邀请收益
  .myInviteIncome{
    padding: 30px 40px 27px;
    height: 220px;
    box-sizing: border-box;
    border-bottom: 1px solid $border-blue-color;
    .myInviteIncomeTitle{
      margin-bottom: 15px;
      line-height: 33px;
      .bigTitle{
        margin-right: 24x;
        font-size: 24px;
        color: $font-color333;
      }
      .smallDes{
        margin-left: 24px;
        font-size: 14px;
        color: $prompt-text-color1;
      }
      .upgrage{
        font-size: 14px;
        padding: 5px 15px;
        border: 1px solid $border-blue-color;
        border-radius: 3px;
        color: $pro-price-color;
        margin-left: 20px;
        &:hover{
          border-color: $pro-price-color;
        }
      }
    }
    .myInviteIncomeTab{
      display: flex;
      justify-content: space-between;
      .card{
        width: 275px;
        height: 110px;
        box-sizing: border-box;
        // background: gray;
        border-radius: 5px;
        padding: 20px 0 20px 20px;
        .cardLeft{
          position: relative;
          width: 70px;
          height: 70px;
          text-align: center;
          line-height: 70px;
          float: left;
          border-radius: 50%;
          i{
            font-size: 33px;
            &::before{
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: $white-color;
            }
          }
        }
        .cardLeft_left{
          background: $circle-linear-gradient-bgColorGray;
        }
        .cardLeft_middle{
          background: $circle-linear-gradient-bgColorBlue;
        }
        .cardLeft_right{
          background: $circle-linear-gradient-bgColorOrigin;
        }
        .cardRight{
          margin-left: 20px;
          float: left;
          position: relative;
          height: 70px;
          .tabName{
            margin-top: 5px;
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 20px;
            color: $save-detail-font-color;
          }
          .tabData{
            line-height: 33px;
            font-size: 24px;
            color: $font-color333;
            .coin{
              margin-left: 10px;
              font-size: 12px;
            }
            .applyText{
              font-size: 20px;
            }
            .applyIng{
              color: $prompt-text-color1;
            }
          }
        }
      }
      .left_card:hover,
      .middle_cad:hover,
      .right_card:hover{
        .cardLeft{
          background: rgba(255, 255, 255, .3)
        }
        .cardRight{
          p{
            color: $white-color;
          }
          .applyIng{
            color: $white-color;
          }
        }
      }
      .left_card:hover{
        background: $circle-linear-gradient-bgColorGray;
        box-shadow: $hover-area-box-shadowGray;
      }
      .middle_cad:hover{
        background: $circle-linear-gradient-bgColorBlue;
        box-shadow: $hover-area-box-shadowBlue;
      }
      .right_card:hover{
        background: $circle-linear-gradient-bgColorOrigin;
        box-shadow: $hover-area-box-shadowOrigin;
      }
    }

  }
  // 我的分享方式
  .share{
    padding: 30px 40px;
    height: 240px;
    box-sizing: border-box;
    .shareTitle{
      font-size: 24px;
      color: $font-color333;
    }
    .shareMethods{
      margin-top: 30px;
      .shareMethods_name,
      .shareMethods_operating{
        .shareMethods_left,
        .shareMethods_middle{
          float: left;
          width: 240px;
        }
        .shareMethods_right{
          float: left;
          width: 380px;
          .pcOrH5{
            color: $btn-lightBlue-color;
          }
        }
      }
      .shareMethods_name{
        margin-bottom: 10px;
        color: $explain-font-color;
      }
      .shareMethods_operating{
        height: 40px;
        .choosePoster_operat{
          height: 40px;
          .choosePoster{
            width: 220px;
            font-size: 16px;
            background: $btn-bg-color;
            color: $white-color;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
          }
        }
        .copyInviteCode_operat,
        .copyLink_operat{
          .copyInviteCode,
          .copyLink{
            position: relative;
            padding-left: 10px;
            padding-right: 90px;
            width: 218px;
            box-sizing: border-box;
            height: 38px;
            border: 1px solid $border-blue-color;
            line-height: 38px;
            color: $font-color333;
            font-size: 16px;
            &::after{
              position: absolute;
              right: 90px;
              top: 50%;
              content: '';
              width: 2px;
              height: 25px;
              transform: translateY(-50%);
              background: $beforeOrAfterBg;
            }
            .copyCode_Text,
            .copyLink_Text{
              position: absolute;
              right: 0;
              top: 0;
              width: 90px;
              height: 38px;
              text-align: center;
              line-height: 38px;
              color: $btn-lightBlue-color;
            }
          }
        }
        .inviteCode_inp, .inviteUrl_inp{
          position: absolute;
          left: -10000px;
          top: -10000px;
        }
        .copyLink_operat{
          width: 378px;
          .copyLink{
            width: 100%;
            padding-right: 124px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            &::after{
              right: 104px;
            }
            .copyLink_Text{
              width: 104px;
            }
          }
        }
      }
    }
    .shareTo{
      position: relative;
      margin-top: 22px;
      line-height: 20px;
      .shareText{
        position: absolute;
        right: 180px
        top: 0;
      }
      .iconDiv{
        position: absolute;
        right: 0;
        top: 0;
        width: 180px;
        height: 20px;
        span{
          float: left;
          margin-left: 15px;
          width: 20px;
          height: 20px;
          i{
            font-size: 20px;
            color: $share-icon-color;
          }
        }
      }
    }
  }
  .line{
    margin: 0 auto;
    width: 880px;
    height: 1px;
    background: $beforeOrAfterBg;
  }
  // 规则
  .rule{
    padding: 30px 40px;
    .rulers-title{
      margin-bottom: 17px;
      font-size: 24px;
      color: $font-color333;
    }
    p{
      position: relative;
      text-indent: 10px;
      line-height: 30px;
      color: $font-color666;
      &::before{
        position: absolute;
        content: '';
        left: -10px;
        top: 17px;
        margin-top: -8px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: $font-color666;
      }
    }
  }
  // 弹窗样式
  .toC1VertifyTitle,
  .toC1VertifyContent,
  .applyToManagerTitle,
  .applyToManagerContent,
  .upDateDialogTitle,
  .upDateDialogCont{
    color: $font-color333;
    text-align: center;
  }
  .toC1VertifyTitle,
  .applyToManagerTitle,
  .upDateDialogTitle{
    margin-top: 26px;
    margin-bottom: 15px;
    line-height: 25px;
    font-size: 18px;
  }
  .toC1VertifyContent,
  .applyToManagerContent,
  .upDateDialogCont{
    line-height: 33px;
    font-size: 24px;
  }
  // 海报弹窗
  .postersDialogMark{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    background: $mask-bg-color;
    z-index: 100;
    transition: all .5s;
    .postersDialog{
      position: relative;
      margin: auto;
      padding: 30px 60px 0;
      width: 750px;
      height: 443px;
      box-sizing: border-box;
      border-radius: 5px;
      transition: all .5s;
      transform: translateY(-150px);
      background: $base-background-color
      .close{
        position: absolute;
        right: -50px;
        top: -26px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid $white-color;
        border-radius: 50%;
        color: $white-color;
        font-size: 20px;
      }
      .posters{
        .poster{
          position: relative;
          padding: 0 15px;
          width: 180px;
          height: 320px;
          .qrCodeDiv{
            position: absolute;
            right: 25px;
            bottom: 10px;
            width: 75px;
            height: 75px;
          }
          img{
            width: 100%;
            height: 100%;
          }
        }
        .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white,
        .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-size: 20px 20px;
          background-color: $btn-lightBlue-color !important;
        }
        .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white{
          left: 0;
        }
        .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white{
          right: 0;
        }
      }
      .desText{
        text-align: center;
        .desText1{
          margin: 18px 0 10px;
          line-height: 25px;
          font-size: 18px;
          color: $font-color333;
        }
        .desText2{
          line-height: 20px;
          font-size: 14px;
          color: $save-detail-font-color;
        }
      }
    }
    .translateY{
      transform: translateY(0);
    }
  }
  .opac{
    opacity: 0;
  }
  // 立即申请经理人有说明的弹窗
  .managerDialogMask{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: flex;
    background: $mask-bg-color;
    z-index: 100;
    transition: all .5s;
    .managerDialog{
      position: relative;
      margin: auto;
      width: 400px;
      height: 560px;
      border-radius: 14px;
      transition: all .5s;
      transform: translateY(-150px);
      background: $base-background-color;
      .close{
        position: absolute;
        right: -50px;
        top: -26px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        border: 1px solid $white-color;
        border-radius: 50%;
        color: $white-color;
        font-size: 20px;
      }
      .bgImg{
        display: flex;
        width: 100%;
        height: 240px;
        background: gray;
        text-align: center;
        border-radius: 5px 5px 0 0;
        background: url(../addImg/invitation/applyBg.png) no-repeat center center/100% 100%;
        background: url(../addImg/invitation/applyBg.png) no-repeat center center/100% 100%;
        .auto{
          margin: auto;
          color: $white-color;
          .bigTitle{
            font-size: 48px;
            line-height: 72px;
          }
          .line{
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 51%,rgba(255,255,255,0) 100%);
          }
          .bigTitleDes{
            font-size: 24px;
            line-height: 53px;
          }
        }
      }
      .aboutManager{
        position: relative;
        padding: 20px 32px 0;
        height: 320px;
        box-sizing: border-box;
        p{
          color: $font-color333;
          font-size: 16px;
          line-height: 30px;
          font-family:PingFangSC-Light;
          letter-spacing: 1px;
        }
        button{
          position: absolute;
          left: 50%;
          bottom: 25px;
          margin-left: -175px;
          width: 350px;
          height: 50px;
          font-size: 18px;
        }
      }
    }
    .translateY{
      transform: translateY(0);
    }
  }
}
